<template>
  <view class="mall-container">
    <!-- 搜索栏 -->
    <uni-search-bar placeholder="请输入药品名称" @confirm="search"/>
	<view class="carousel-section">
		<!-- 标题栏和状态栏占位符 -->
		<view class="titleNview-placing"></view>
		<swiper class="carousel" autoplay circular indicator-dots indicator-color="#999"  indicator-active-color="#0EB6FD">
			<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item">
				<image :src="item.mallImg" />
			</swiper-item>
		</swiper>
		
	</view>
	<view class="mall-type-list">
		<view @click="goGoodsList(item.medicinesType)" v-for="(item,index) in goodsType" :key="index">
			<image :src="item.img"/>
			<text>{{item.name}}</text>
		</view>
	</view>
	<uni-card>
		<view class="mall-ask-item">
			<view class="ask-item-wrapper">
				<view class="ask-item-text">
					<span style="font-size: 18px;color: #000;">问诊购药</span> <span class="ask-text-tip">开处方</span>
				</view>
				<view class="ask-item-text-under">
					适用于常见病、病情稳定的慢性病患者
				</view>
			</view>
			<view @click="goRegistration" class="wz-btn-box">
				<button class="wz-btn">立即问诊</button>
			</view>
		</view>
	</uni-card>
	<scroll-view scroll-x class="nav-scroll">
	  <view class="nav-item" v-for="(item, index) in mallTypeList" :key="index" @click="changeNav(index)">
	    <text :class="['nav-text', mallType === index ? 'active' : '']">{{item.label}}</text>
	  </view>
	</scroll-view>
	<view class="mall-list-container">
		<view class="mall-list-item" v-for="(item,index) in goodsList" :key="index">
			<view class="mall-list-item-img" @click="goGoodsDetail(item.medicinesId)">
				<image :src="item.medicinesImg"/>
			</view>
			<view class="mall-list-item-text">
				<view class="mall-list-item-text-title">
					{{item.medicinesName}}
				</view>
				<view class="mall-list-item-text-desc">
					{{item.effect}}
				</view>
				<view class="mall-list-item-text-price">
					￥<span style="font-size: 20px;">{{(item.prescriptionPrice).toFixed(1)}}</span>
				</view>
			</view>
		</view>
	</view>
  </view>
</template>
<script>
import {
	listGoodType
} from '@/api/goodsType/index.js'
import {
	listMedicinesByType,
	listMedicinesRand,
	listMedicinesByName
} from '@/api/medicines/index.js'
  export default {
    data() {
      return {
		goodsType: [],
		goodsList: [],
        carouselList: [
			{id: 0,mallImg: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.piEr3xpEzO47IEag3mPvlAHaDt?w=202&h=101&c=7&r=0&o=5&dpr=1.5&pid=1.7'},
			{id: 1,mallImg: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.SwjKb-VphX8jhWEpnN8V8AHaFG?w=253&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7'},
			{id: 2,mallImg: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.kOleLg6SdH_m5xxnj8IfHAHaFj?w=240&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7'},
		],
		mallTypeList: [
			{index: 0,label: '精选推荐'},
			{index: 3,label: '出行必备'},
			{index: 7,label: '呼吸系统'},
			{index: 1,label: '营养保健'},
			{index: 6,label: '健脾消食'},
		],
		mallType: 0,
      }
    },
    methods: {
		search(value) {
			listMedicinesByName(value.value).then(res => {
				//跳转到药品列表
				uni.navigateTo({
					url: '/pages/goods/index?medicinesName='+value.value
				})
			})
		},
     //切换分类
		changeNav(index) {
		   this.mallType = index;
			if(index == 0){
			   this.getGoodsListRand();
			}else{
			   this.getGoodsListByType();
		    }
      },
	  //跳转商品详情
	    goGoods(id){
		   uni.navigateTo({
			   url: '/pages/goods/detail?id='+id
		   })
	   },
	   //跳转商品列表
	    goGoodsList(medicinesType){
		   uni.navigateTo({
			   url: '/pages/goods/index?medicinesType='+medicinesType
		   })
	   },
	   //跳转问诊
	   goRegistration(){
		   uni.navigateTo({
			   url: '/pages/help/index'
		   })
	   },
	   getGoodsType(){
		   listGoodType().then(res => {
			   this.goodsType = res.data
		   })
	   },
	   getGoodsListRand(){
		   listMedicinesRand().then(res => {
			   this.goodsList = res.data
		   })
		},
		getGoodsListByType(){
			listMedicinesByType(this.mallTypeList[this.mallType].index).then(res => {
				this.goodsList = res.data
			})
		},
		goGoodsDetail(medicinesId) {
			uni.navigateTo({
				url: '/pages/goods/detail?medicinesId='+medicinesId
			});
		},
	},
    onLoad() {
		this.getGoodsType();
		this.getGoodsListRand();
    }
  }
</script>
<style lang="scss">
.mall-list-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.mall-list-item{
  display: flex;
  flex-direction: column;
  width: 48%;
  margin: 1%;
  background-color: white;
  border-radius: 10px;
  padding: 10px;
	  .mall-list-item-img{
		  width: 100%;
		  height: 100px;
		  image{
			  width: 100%;
			  height: 100%;
		  }
	  }
	  .mall-list-item-text{
		  margin-top: 8px;
		  margin-left: 0;
		  .mall-list-item-text-title{
			  font-size: 16px;
			  font-weight: bold;
		  }
		  .mall-list-item-text-desc{
			  margin-top: 5px;
			  font-size: 14px;
			  color: #999;
		  }
		  .mall-list-item-text-price{
			  font-size: 14px;
			  color: #F66586;
		  }
	  }
  }
  
  .uni-searchbar {
	  background-color: #fff;
  }
  
  .nav-scroll {
    white-space: nowrap;
    margin: 20rpx 0;
    background-color: white;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10rpx 20rpx;
    border-radius: 10rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  }

  .nav-item {
    display: inline-block;
    padding: 0 20rpx;
    font-size: large;
    transition: all 0.3s ease;
    position: relative;
    margin: 0 10rpx;
    padding: 10rpx 20rpx;
    border-radius: 20rpx;
  }

  .nav-text {
    padding-bottom: 8rpx;
    transition: color 0.3s ease;
  }

  .nav-text.active {
    color: #0EB6FD;
    font-weight: bold;
    background-color: rgba(14, 182, 253, 0.1);
  }

  .nav-text.active::after {
    display: none;
  }
    
    .nav-text {
      padding-bottom: 8rpx;
      
      &.active {
        color: #0EB6FD;
        font-weight: bold;
        
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 60%;
          height: 4rpx;
          background-color: #0EB6FD;
          border-radius: 2rpx;
        }
      }
    }
  
  
  .ask-text-tip{
	  font-size: 12px;
	  color: #F66586;
	  margin-left: 5px;
  }
  
  .mall-ask-item{
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  height: auto;
	  padding: 15px;
  }
  
  .ask-item-wrapper{
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
  }
  .ask-item-text{
	  margin-bottom: 5px;
  }
  
  .ask-item-text{
	  width: auto;
	  margin-right: 15px;
	  display: flex;
	  align-items: center;
	  gap: 10px;
  }
  
  .ask-item-text-under{
	  width: auto;
	  font-size: 13px;
	  margin-top: 5px;
	  line-height: 1.4;
  }
  
  .wz-btn-box{
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  width: 100px;
	  margin-left: 15px;
  }
  
  .wz-btn{
	  color: white;
	  width: 100px;
	  height: 30px;
	  font-size: 15px;
	  line-height: 30px;
	  border-radius: 20px;
	  background-color: #F66586;
  }
  
  .mall-type-list{
	  display: flex;
	  flex-wrap: wrap;
	  margin: 0 10px;
	  background-color: white;
	  view{
		  width: 25%;
		  text-align: center;
		  padding: 10px 0;
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  justify-content: center;
		  image{
			  width: 50px;
			  height: 50px;
			  margin-bottom: 8px;
		  }
	  }
  }
  
  .titleNview-placing {
  	padding-top: 0;
  	height: 0;
  }
  
  .carousel {
  	width: 100%;
  	height: 350upx;
  
  	.carousel-item {
  		width: 100%;
  		height: 100%;
  		padding: 0 28upx;
  		overflow: hidden;
  	}
  
  	image {
  		width: 100%;
  		height: 100%;
  		border-radius: 10upx;
  	}
  }
  
  .carousel-section {
  	padding: 0;
	margin: 0 10px;
  	.titleNview-placing {
  		padding-top: 0;
  		height: 0;
  	}
  
  	.carousel {
  		.carousel-item {
  			padding: 0;
  		}
  	}
  
  	.swiper-dots {
  		left: 45upx;
  		bottom: 40upx;
  	}
  }
</style>